<template>
  <div class="body">
    <div id="main" class="table">
      <section class="table__header">
        <h1>大哥榜单</h1>
        <div class="input-group">
          <input ref="searchInput" type="search" placeholder="输入关键字" />
          <img src="./images/search.png" alt="" />
        </div>
        <div class="export__file">
          <label for="export-file" class="export__file-btn" title="Export File"></label>
          <input type="checkbox" id="export-file" />
          <div class="export__file-options">
            <label>Export As &nbsp; &#10140;</label>
            <label for="export-file" id="toPDF"
              >PDF <img src="./images/pdf.png" alt=""
            /></label>
            <label for="export-file" id="toJSON"
              >JSON <img src="./images/json.png" alt=""
            /></label>
            <label for="export-file" id="toCSV"
              >CSV <img src="./images/csv.png" alt=""
            /></label>
            <label for="export-file" id="toEXCEL"
              >EXCEL <img src="./images/excel.png" alt=""
            /></label>
          </div>
        </div>
      </section>
      <section class="table__body">
        <table>
          <thead>
            <tr ref='thead tr'>
              <th>Id <span class="icon-arrow">&UpArrow;</span></th>
              <th>大    哥 <span class="icon-arrow">&UpArrow;</span></th>
              <th>地    址 <span class="icon-arrow">&UpArrow;</span></th>
              <th>Order Date <span class="icon-arrow">&UpArrow;</span></th>
              <th>状    态 <span class="icon-arrow">&UpArrow;</span></th>
              <th>金    额 <span class="icon-arrow">&UpArrow;</span></th>
            </tr>
          </thead>
          <tbody>
            <tr ref="tbodyTr">
              <td>1</td>
              <td><img src="./images/Zinzu Chan Lee.jpg" alt="" />Zinzu Chan Lee</td>
              <td>Seoul</td>
              <td>17 Dec, 2022</td>
              <td>
                <p class="status delivered">Delivered</p>
              </td>
              <td><strong> $128.90 </strong></td>
            </tr>
            <tr>
              <td>2</td>
              <td><img src="./images/Jeet Saru.jpg" alt="" /> Jeet Saru</td>
              <td>Kathmandu</td>
              <td>27 Aug, 2023</td>
              <td>
                <p class="status cancelled">Cancelled</p>
              </td>
              <td><strong>$5350.50</strong></td>
            </tr>
            <tr>
              <td>3</td>
              <td><img src="./images/Sonal Gharti.jpg" alt="" /> Sonal Gharti</td>
              <td>Tokyo</td>
              <td>14 Mar, 2023</td>
              <td>
                <p class="status shipped">Shipped</p>
              </td>
              <td><strong>$210.40</strong></td>
            </tr>
            <tr>
              <td>4</td>
              <td><img src="./images/Alson GC.jpg" alt="" /> Alson GC</td>
              <td>New Delhi</td>
              <td>25 May, 2023</td>
              <td>
                <p class="status delivered">Delivered</p>
              </td>
              <td><strong>$149.70</strong></td>
            </tr>
            <tr>
              <td>5</td>
              <td><img src="./images/Sarita Limbu.jpg" alt="" /> Sarita Limbu</td>
              <td>Paris</td>
              <td>23 Apr, 2023</td>
              <td>
                <p class="status pending">Pending</p>
              </td>
              <td><strong>$399.99</strong></td>
            </tr>
            <tr>
              <td>6</td>
              <td><img src="./images/Alex Gonley.jpg" alt="" /> Alex Gonley</td>
              <td>London</td>
              <td>23 Apr, 2023</td>
              <td>
                <p class="status cancelled">Cancelled</p>
              </td>
              <td><strong>$399.99</strong></td>
            </tr>
            <tr>
              <td>7</td>
              <td><img src="./images/Alson GC.jpg" alt="" /> Jeet Saru</td>
              <td>New York</td>
              <td>20 May, 2023</td>
              <td>
                <p class="status delivered">Delivered</p>
              </td>
              <td><strong>$399.99</strong></td>
            </tr>
            <tr>
              <td>8</td>
              <td><img src="./images/Sarita Limbu.jpg" alt="" /> Aayat Ali Khan</td>
              <td>Islamabad</td>
              <td>30 Feb, 2023</td>
              <td>
                <p class="status pending">Pending</p>
              </td>
              <td><strong>$149.70</strong></td>
            </tr>
            <tr>
              <td>9</td>
              <td><img src="./images/Alex Gonley.jpg" alt="" /> Alson GC</td>
              <td>Dhaka</td>
              <td>22 Dec, 2023</td>
              <td>
                <p class="status cancelled">Cancelled</p>
              </td>
              <td><strong>$249.99</strong></td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect,onMounted } from "vue";
const searchInput = ref(null);
const tbodyTr = ref(null);
const theadTr = ref(null);





</script>
<style scoped>
@import "./common/style.css";
</style>
